<template>
  <div>
    <child-nav-bar :title="'学习成果认定'"></child-nav-bar>
    <!-- 认定数据列表 -->
    <van-collapse v-model="activeNames">
      <van-collapse-item v-for="(item, index) in  listData" :key="item.id">
        <template #title>
          <!-- <span>{{ item.s_number === undefined ? '' : '学号：' + item.s_number }}；</span> -->
          <span>{{ item.achievement_type === undefined ? '' : '类别：' + item.achievement_type.type_name }}；</span>
          <span>申请状态：</span>
          <span v-if="item.outcome == 0" style="color: rgba(255, 0, 0, 0.539);">未通过</span>
          <span v-else-if="item.outcome == 1">审批中</span>
          <span v-else-if="item.outcome == 2" style="color: rgba(0, 128, 0, 0.62);">通过</span>
        </template>
        <template>
          <van-list>
            <van-cell :title="'序号：' + (index + 1)" />
            <van-cell>
              <template #title> {{ item.s_number === undefined ? '' : '学号：' + item.s_number }} </template>
            </van-cell>
            <van-cell>
              <template #title> {{ item.achievement_type === undefined ? '' : '类别：' + item.achievement_type.type_name }}
              </template>
            </van-cell>
            <van-cell>
              <template #title> {{ item.describe === undefined ? '' : '描述：' + item.describe }} </template>
            </van-cell>
            <van-cell>
              <template #title> {{ item.subTime === undefined ? '' : '提交日期：' + item.subTime }} </template>
            </van-cell>
            <!-- 文件下载 -->
            <van-cell>
              <template #title>
                <span>下载文件：</span>
                <a v-if="item.uploadFile" :href="'http://localhost:8015/user/'+ item.uploadFile"> 点击下载 </a>
                <span v-else style="color: #ccc;">暂无</span>
              </template>
            </van-cell>
            <!-- 申请状态 -->
            <van-cell>
              <template #title> <span>申请状态：</span>
                <span v-if="item.outcome == 0" style="color: rgba(255, 0, 0, 0.539);">未通过</span>
                <span v-else-if="item.outcome == 1">审批中</span>
                <span v-else-if="item.outcome == 2" style="color: rgba(0, 128, 0, 0.62);">通过</span>
              </template>
            </van-cell>
            <!-- 修改结构 -->
            <van-cell v-if="item.outcome != 2">
              <template #title> 修改：<button class="modify-buttons" @click="modify(item)">修改信息</button></template>
            </van-cell>
          </van-list>
        </template>
      </van-collapse-item>
    </van-collapse>
    <div style="min-height: 90px;"> </div>
    <!-- 添加认定按钮 -->
    <van-goods-action>
      <van-goods-action-button type="info" text="添加" color="#be99ff" @click="onClickButton" />
    </van-goods-action>
    <!-- 弹出层 -->
    <van-action-sheet v-model="show" :title="formTitle">
      <!-- 添加表单内容 -->
      <div class="content">
        <van-form @submit="onSubmit">
          <!-- 学号 -->
          <van-field v-model="form.s_number" name="s_number" label="学号" placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]" disabled />
          <!-- 类别 -->
          <van-field readonly clickable name="picker" :value="getTypeName(form.achieve_type)" label="类别"
            placeholder="点击选择类别" @click="showPicker = true" />
          <van-popup v-model="showPicker" position="bottom">
            <van-picker show-toolbar :columns="typeData" value-key="type_name" @confirm="onConfirm"
              @cancel="showPicker = false" />
          </van-popup>
          <!-- 描述 -->
          <van-field v-model="form.describe" name="describe" label="描述" placeholder="请填写描述"
            :rules="[{ required: true, message: '请填写描述' }]" />
          <!-- 上传文件 -->
          <van-uploader :after-read="afterRead" :max-count="2">
            <van-button class="modify-buttons " icon="plus">上传文件</van-button>
          </van-uploader>
          <!-- 提价按钮 -->
          <div style="margin: 18px;">
            <van-button round block type="info" native-type="submit">提交</van-button>
          </div>
        </van-form>
      </div>
    </van-action-sheet>
  </div>
</template>
<script>
import { identified, achievementType, postAchievement, modify } from '@/api/student/achievementAPI'
import { uploadFile } from "@/api/user";
import { TransitionStub } from '@vue/test-utils';
export default {
  data() {
    return {
      activeNames: ['1'],
      listData: [], // 数据
      show: false, // 弹出层（添加） 
      // 添加成果 数据
      typeData: [], //类别数据
      formTitle: '',
      form: {
        id: '',
        s_number: '', // 学号
        achieve_type: '', // 类别
        describe: '', // 描述
        subTime: '',  // 提交时间
        status: 0, // 认定状态
        outcome: 1, // 初始审核中
        uploadFile: '' // 上传文件

      },
      showPicker: false,

    };
  },
  computed: {
    // 个人信息
    user() {
      return this.$store.getters.info
    }
  },
  created() {
    this.getAchievementData()
  },
  methods: {
    // 获取 成果认定信息
    async getAchievementData() {
      const { data } = await identified(this.user.username)
      this.listData = data
      console.log(this.listData);
      this.form.s_number = this.user.username
      // 成果类别表数据
      const res = await achievementType()
      this.typeData = res.data
    },
    // 添加按钮
    onClickButton() {
      this.removeFormData()
      this.formTitle = '成果认定添加'
      this.show = true
    },

    // 表单提交
    async onSubmit() {
      // 给 申请表单中的 日期 添加当前日期
      const currentDate = new Date();
      const year = currentDate.getFullYear();
      const month = String(currentDate.getMonth() + 1).padStart(2, '0');
      const day = String(currentDate.getDate()).padStart(2, '0');
      this.form.subTime = `${year}-${month}-${day}`;


      if (this.form.id) { // 修改
        // console.log("修改表单欲提交", this.form) 
        const res = await modify(this.form)
        this.$toast(res.message); // 消息提示
        this.removeFormData()
      }
      else { // 添加
        // console.log("form表单欲提交", this.form)
        // 发送请求
        const res = await postAchievement(this.form)
        this.$toast(res.message); // 消息提示
        this.removeFormData()
      }
      this.show = false
      //重新调取方法
      setTimeout(() => {
        this.getAchievementData();
      }, 100)


    },

    // 上传文件
    async afterRead(file) {
      const from = new FormData();
      from.append("file", file.file)
      const res = await uploadFile(from)
      if (res.code === 200) {
        this.form.uploadFile = res.message
      }
    },


    // 类别方法
    getTypeName(value) {

      let da = this.typeData.find(d => {
        return d.type_id === value
      })
      return da?.type_name
    },

    // 表单选择器
    onConfirm(value) {
      this.form.achieve_type = value.type_id;
      this.showPicker = false;
    },

    //添加内容
    async addAchievement() {

    },

    // 修改内容
    modify(item) {
      // 打开 弹出
      this.formTitle = '修改信息'
      this.show = true
      // 表单初始值
      this.form.achieve_type = item.achieve_type
      this.form.describe = item.describe
      this.form.id = item.id
      this.form.uploadFile = item.uploadFile

    },

    // 消除 表单数据
    removeFormData() {
      // 清除数据
      this.form.achieve_type = ''
      this.form.describe = ''
      this.form.id = ''
      this.form.uploadFile = ''
    }



  }
}

</script>
<style lang="less" scoped>
// 弹出层 样式
.content {
  padding: 16px 16px 160px;
}

// 修改数据按钮样式
.modify-buttons {
  outline: none;
  border: none;
  border-radius: 10px;
  background-color: #07c160;
  color: #ffffff;
}

// a 标签样式
a {
  color: blue; /* 设置链接文本颜色为蓝色 */
  text-decoration: underline; /* 添加下划线 */
}
a:hover {
  color: red; /* 鼠标悬停时设置链接文本颜色为红色 */
  text-decoration: none; /* 鼠标悬停时去除下划线 */
}
</style>